import React from 'react';
import OSSFileSelector from '../../UpAiPersionData/components/OSSFileSelector';
import FilePreview from '../../UpAiPersionData/components/FilePreview';
import { PersonData } from '@/types/aiPerson';

interface BasicInfoFormProps {
  data: PersonData;
  onChange: (data: PersonData) => void;
}

// 基本信息表单组件
const BasicInfoForm: React.FC<BasicInfoFormProps> = ({ data, onChange }) => {
  
  // 处理表单字段变化
  const handleFieldChange = (field: string, value: any) => {
    if (field.startsWith('information.')) {
      // 处理嵌套的 information 字段
      const infoField = field.replace('information.', '');
      onChange({
        ...data,
        information: {
          ...data.information,
          [infoField]: value
        }
      });
    } else {
      // 处理顶层字段
      onChange({
        ...data,
        [field]: value
      });
    }
  };

  // 处理输入框变化
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const { name, value, type } = e.target;
    const processedValue = type === 'checkbox' ? (e.target as HTMLInputElement).checked :
      type === 'number' ? Number(value) : value;
    
    handleFieldChange(name, processedValue);
  };

  // 处理textarea自动调整高度
  const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    
    // 自动调整高度
    e.target.style.height = 'auto';
    e.target.style.height = e.target.scrollHeight + 'px';
    
    handleFieldChange(name, value);
  };

  // 删除单个文件（用于单选字段）
  const removeSingleFile = (fieldName: string) => {
    handleFieldChange(fieldName, '');
  };

  return (
    <div>
      <h3 className="text-xl font-semibold text-gray-800 mb-6 border-b pb-2">基本信息</h3>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* 头像上传 */}
        <div className="flex flex-col">
          <label className="mb-2 font-medium text-gray-700">头像URL</label>
          <OSSFileSelector
            value={data.avatar}
            onChange={(value) => handleFieldChange('avatar', value as string)}
            placeholder="选择头像文件"
          />
          <FilePreview
            files={data.avatar}
            multiple={false}
            onRemove={() => removeSingleFile('avatar')}
          />
        </div>

        {/* 主图上传 */}
        <div className="flex flex-col">
          <label className="mb-2 font-medium text-gray-700">主图URL</label>
          <OSSFileSelector
            value={data.image}
            onChange={(value) => handleFieldChange('image', value as string)}
            placeholder="选择主图文件"
          />
          <FilePreview
            files={data.image}
            multiple={false}
            onRemove={() => removeSingleFile('image')}
          />
        </div>

        {/* 人设名 */}
        <div className="flex flex-col">
          <label className="mb-2 font-medium text-gray-700">人设名</label>
          <input
            name="information.name"
            value={data.information.name}
            onChange={handleInputChange}
            className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
            required
          />
        </div>

        {/* 年龄 */}
        <div className="flex flex-col">
          <label className="mb-2 font-medium text-gray-700">年龄</label>
          <input
            name="information.age"
            type="number"
            min={1}
            value={data.information.age}
            onChange={handleInputChange}
            className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
            required
          />
        </div>

        {/* 性别 */}
        <div className="flex flex-col">
          <label className="mb-2 font-medium text-gray-700">性别</label>
          <input
            name="information.gender"
            value={data.information.gender}
            onChange={handleInputChange}
            placeholder="如：女"
            className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
          />
        </div>

        {/* 职业 */}
        <div className="flex flex-col">
          <label className="mb-2 font-medium text-gray-700">职业</label>
          <input
            name="information.occupation"
            value={data.information.occupation}
            onChange={handleInputChange}
            placeholder="如：学生"
            className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
          />
        </div>

        {/* 星座 */}
        <div className="flex flex-col">
          <label className="mb-2 font-medium text-gray-700">星座</label>
          <input
            name="information.zodiac"
            value={data.information.zodiac}
            onChange={handleInputChange}
            placeholder="如：金牛座"
            className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
          />
        </div>

        {/* 生日 */}
        <div className="flex flex-col">
          <label className="mb-2 font-medium text-gray-700">生日</label>
          <input
            name="information.birthday"
            value={data.information.birthday}
            onChange={handleInputChange}
            placeholder="如：9月26日"
            className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
          />
        </div>

        {/* 语言 */}
        <div className="flex flex-col">
          <label className="mb-2 font-medium text-gray-700">语言</label>
          <select
            name="information.language"
            value={data.information.language}
            onChange={handleInputChange}
            className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="Chinese">Chinese</option>
            <option value="English">English</option>
            <option value="Japanese">Japanese</option>
          </select>
        </div>

        {/* 国家 */}
        <div className="flex flex-col">
          <label className="mb-2 font-medium text-gray-700">国家</label>
          <select
            name="country"
            value={data.country}
            onChange={handleInputChange}
            className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="JP">日本</option>
            <option value="EN">欧美</option>
          </select>
        </div>

        {/* 点赞数 */}
        <div className="flex flex-col">
          <label className="mb-2 font-medium text-gray-700">点赞数</label>
          <input
            name="likes"
            value={data.likes}
            onChange={handleInputChange}
            className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
            required
          />
        </div>

        {/* 评论数 */}
        <div className="flex flex-col">
          <label className="mb-2 font-medium text-gray-700">评论数</label>
          <input
            name="comments"
            value={data.comments}
            onChange={handleInputChange}
            className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
            required
          />
        </div>

        {/* 是否为高级 */}
        <div className="flex flex-col">
          <label className="mb-2 font-medium text-gray-700">是否为高级（isPremium）</label>
          <select
            name="is_premium"
            value={data.is_premium ? "true" : "false"}
            onChange={(e) => handleFieldChange('is_premium', e.target.value === "true")}
            className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
          >
            <option value="false">否</option>
            <option value="true">是</option>
          </select>
        </div>

        {/* 类型 */}
        <div className="flex flex-col">
          <label className="mb-2 font-medium text-gray-700">类型（type）</label>
          <select
            name="type"
            value={data.type}
            onChange={handleInputChange}
            className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
          >
            <option value="Girl">Girl</option>
            <option value="Man">Man</option>
            <option value="AnimeGirl">AnimeGirl</option>
            <option value="AnimeMan">AnimeMan</option>
          </select>
        </div>

        {/* 背景描述 */}
        <div className="flex flex-col lg:col-span-2">
          <label className="mb-2 font-medium text-gray-700">背景（description）</label>
          <textarea
            name="description"
            value={data.description}
            onChange={handleTextareaChange}
            className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all min-h-[150px] resize-none overflow-hidden"
            required
          />
        </div>
      </div>
    </div>
  );
};

export default BasicInfoForm;